<div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>文章管理</legend>
    </fieldset>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">文章标题:</label>
                <div class="layui-input-inline">
                    <input type="text" name="rticleaTitle" autocomplete="off" class="layui-input" placeholder="请输入">
                </div>
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="rticleaDoSearch">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="doReset">重置</button>
            </div>
        </div>
    </form>
    <div class="layui-btn-group demoTable">
        <button class="layui-btn" data-type="getCheckData" id="rticleaAlldata">获取选中行数据</button>
        <button class="layui-btn" data-type="getCheckLength" id="rticleaAllNum">获取选中数目</button>
        <button class="layui-btn" data-type="refresh" id="rticleaAllRefresh">刷新</button>
        <button class="layui-btn" data-type="addUser" id="rticleaAllAdd">添加</button>
    </div>
    <table class="layui-hide" id="rticleaTables" lay-filter="rticleaTables"></table>
    <div style="display: none" id="rticleabarDemo" type="text/html">
        <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
    </div>
</div>
<script>
    layui.use(['table', 'util', 'config', 'form'], function () {
        var table = layui.table;
        var config = layui.config;
        var util = layui.util;
        var form = layui.form;
        table.render({
            elem: '#rticleaTables',
            id: "rticlea"
            , url: config.base_server + 'getRticleaList'
            , cols: [[
                { type: 'checkbox' }
                , { field: 'rticleaId', title: '文章编号', sort: true, minWidth: 20 }
                , { field: 'rticleaTitle', title: '文章标题', minWidth: 100 }
                , { field: 'rticleaComm', title: '文章内容', minWidth: 100 }
                , { field: 'rticleaTime', title: '发布时间', minWidth: 50 }
                , {
                    field: 'rticleaImgList', title: '文章内容', minWidth: 100, templet: function (d) { return '<div ><img src=' + d.rticleaImgList[0] + ' style="width: 50px;"></div>' }
                }
                , { title: '操作', toolbar: '#rticleabarDemo', width: "20%" }
            ]]
            , page: true //开启分页
            , skin: 'row' //行边框风格
            , even: true //开启隔行背景
            , size: 'lg' //小尺寸的表格
        });

        table.on('tool(rticleaTables)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                var editId = data.rticleaId;
                layer.confirm('真的删除该文章吗?', function (index) {
                    $.ajax({
                        type: "POST",
                        url: config.base_server + "deleteRticleaById",
                        data: { rticleaId: editId },
                        dataType: "json",
                        success: (data) => {
                            if (data.code) {
                                obj.del();
                                // table.reload('user');
                                layer.msg('删除成功', {
                                    icon: 1
                                });
                                layer.close(index);
                            } else {
                                alert(data.info);
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                var editId = data.rticleaId;
                var fu = layer.open({
                    type: 2,
                    title: "编辑" + editId + "号文章",
                    area: ['800px', '800px'],
                    fix: false,
                    content: 'components/system/rticleaEditTable.html?editNo=' + editId,
                    maxmin: true,
                    end: function () {
                        table.reload('rticlea');
                    }
                });

            } else if (obj.event === 'detail') {
                var editId = data.rticleaId;
                var fu = layer.open({
                    type: 2,
                    title: "查看" + editId + "号文章",
                    area: ['600px', '600px'],
                    fix: false,
                    content: 'components/system/rticleaDetailTable.html?editNo=' + editId,
                    maxmin: true,
                    end: function () {
                        table.reload('rticlea');
                    }
                });
            }
        });

        $('#rticleaAlldata').on('click', function () {
            var checkStatus = table.checkStatus('rticlea')
                , data = checkStatus.data;
            layer.alert(data.map(item => {
                return item.userName;
            }).join(","));
        });
        $('#rticleaAllNum').on('click', function () {

            var checkStatus = table.checkStatus('rticlea')
                , data = checkStatus.data;
            var datas = JSON.stringify(data)
            var ids = ''
            for (var i = 0; i < datas.length; i++) {
                ids = ids + datas[i].UserNo
            }
            layer.msg('选中了：' + data.length + ' 个');

        });

        $('#rticleaAllRefresh').on('click', function () {
            location.reload();
        });
        $('#rticleaAllAdd').on('click', function () {
            var fu = layer.open({
                type: 2,
                title: '添加',
                area: ['800px', '800px'],
                fix: false,
                content: 'components/system/rticleaAddable.html',
                maxmin: true,
                end: function () {
                    table.reload('rticlea');
                }
            });
        });
        //  查询按钮
        $('#rticleaDoSearch').on('click', function () {
            var rticleaTitle = $("input[name='rticleaTitle']").val();
            table.reload('rticlea', {
                url: config.base_server + 'getRticleaList'
                , where: { rticleaTitle: rticleaTitle }
            });
        });
        $('#doReset').on('click', function () {
            location.reload();
        });
    });

</script>